<template v-if="currentIndex == 1">
  <view class="data_box">
    <view class="view_all" @click="viewAll"> 查看全部 </view>
    <view class="ai_list_box" v-if="aiDataList.length > 0">
      <template v-for="(item, index) in aiDataList">
        <view class="single_data box" :key="index">
          <!-- <view
            class="user_type_box box"
            v-if="
              (userType == 3 && (item.managerShopName || item.guideName)) ||
              (userType == 2 && item.guideName)
            "
          >
            <text>导购：</text>
            <text v-if="userType == 3 && item.managerShopName">{{
              item.managerShopName
            }}</text>
            <text v-if="item.guideName">{{ item.guideName }}</text>
          </view> -->
          <view class="width_32 height_32 br_16 mr_12 avatar_box">
            <image
              :src="
                item.avatar
                  ? item.avatar
                  : '../../static/images/avatar_empty.png'
              "
              mode=""
              class="user_avatar"
            ></image>
          </view>
          <view class="single_content box">
            <view class="new_name_box">
              <view class="new_name fz_14 fc_333 fb">{{ item.name }}</view>
              <view class="new_date_box ml_8 fz_12 fc_999">{{
                item.timeStr
              }}</view>
            </view>
            <!-- <view class="name_box">
              <text class="user_name fz_14 fc_333 fb">{{ item.name }}</text>
              <text class="ml_8 fz_12 fc_999">{{ item.timeStr }}</text>
            </view> -->
            <view class="check_box box mt_6 mb_4">
              <text class="check_type">
                {{
                  item.type == 1
                    ? "购买商品"
                    : item.type == 2
                    ? "加入购物车"
                    : item.type == 3
                    ? "收藏商品"
                    : item.type == 4
                    ? "分享商品"
                    : item.type == 5
                    ? "浏览商品"
                    : item.type == 6
                    ? "邀请用户"
                    : ""
                }}
              </text>
              <text class="goods_name ml_8 fb">{{ item.content }}</text>
              <text v-if="item.type == 6" class="ml_8">注册成功</text>
            </view>
            <view class="fz_12 fc_333" v-if="item.type == 4 || item.type == 5">
              最近3天{{ item.type == 4 ? "分享" : "浏览"
              }}{{ item.lookTimes || 0 }}次
            </view>
            <view
              class="user_type_box box"
              v-if="
                (userType == 3 && (item.managerShopName || item.guideName)) ||
                (userType == 2 && item.guideName)
              "
            >
              <text>导购：</text>
              <text v-if="userType == 3 && item.managerShopName">{{
                item.managerShopName
              }}</text>
              <text v-if="item.guideName">{{ item.guideName }}</text>
            </view>
          </view>
        </view>
      </template>
    </view>
    <view class="" v-else>
      <Empty />
    </view>
    <!-- 		<view class="single_data box ">
			<view class="width_32 height_32 br_16 mr_12">
			</view>
			<view class="single_content box">
				<view class="">
					<text class="fz_14 fc_333 fb">章西</text>
					<text class="ml_8 fz_12 fc_999">刚刚</text>
				</view>
				<view class="check_box box mt_6 mb_4">
					<view class="check_type">查看商品 </view>
					<view class="goods_name ml_8">极简风格 超柔舒适 全实木框架+白鹅羽绒靠极简风格 超柔舒适 全实木框架+白鹅羽绒靠</view>
				</view>
				<view class="fz_12 fc_333">
					已分享过6次
				</view>
			</view>
		</view> -->
  </view>
</template>

<script>
import api from "@/service/config/api";
import Empty from "../../../radar/merchant/components/empty.vue";
export default {
  components: {
    Empty,
  },
  props: {
    userType: {
      default: 4,
      type: Number,
    },
    ossUrl: {
      default: "",
      type: String,
    },
    tenantId: {
      default: "",
      type: String,
    },
    normalUser: {
      default: 1,
      type: Number,
    },
    currentIndex: {
      default: 0,
      type: Number,
    },
  },
  data() {
    return {
      aiDataList: [],
      startTime: "",
      currentPage: 1,
      size: 100,
      timer: null,
    };
  },
  created() {
    if (this.userType != 4) {
      this.startTime = new Date();
      this.getHistoriList();
      this.timer = setInterval(() => {
        this.getLatestList();
      }, 30000);
      uni.showToast({
        title: "加载中...",
        icon: "none",
      });
    }

    // console.log("页面家在")
    // console.log(this.userType)
    // this.startTime = new Date()
    // this.getHistoriList()
    // setTimeout(() => {
    // 	this.getHistoriList()
    // }, 3000)
  },
  destroyed() {
    clearInterval(this.timer);
  },
  watch: {
    current(newValue, oldValue) {
      console.log("tab变化了");
      // 数据变化时执行异步请求
      // console.log("数据变化")
      // if (this.current == 1) {
      // 	this.startTime = new Date()
      // 	this.getHistoriList()
      // }
      this.$forceUpdate();
    },
  },
  // mounted() {
  // uni.hideToast()
  // },
  methods: {
    viewAll() {
      uni.navigateTo({
        url: "/pages/radar/user_ai",
      });
    },
    deduplicateArrayById(arr) {
      const idSet = new Set();
      const result = [];

      for (let obj of arr) {
        if (!idSet.has(obj.id)) {
          idSet.add(obj.id);
          result.push(obj);
        }
      }

      return result;
    },
    minutesBetweenDates(date1, date2) {
      const oneMinute = 60 * 1000; // 1分钟的毫秒数
      const diff = Math.abs(date2.getTime() - date1.getTime()); // 计算时间差
      return Math.floor(diff / oneMinute); // 转换为分钟
    },
    // 获取历史数据列表
    getHistoriList() {
      const startTime = this.$moment(this.startTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.startTime = startTime;
      const basicUserInfo = uni.getStorageSync("basicUnserInfo");
      api
        .post("/user/api/radar/aiPageData", {
          consumerIds: basicUserInfo.consumerIds,
          tenantId: this.tenantId,
          size: this.size,
          current: this.currentPage,
          startTime: startTime,
        })
        .then((res) => {
          const newData = this.aiDataList.concat(res.data.records);
          const deduplicatedArr = this.deduplicateArrayById(newData);
          this.aiDataList = deduplicatedArr.splice(0, 100);
          this.aiDataList.map((item) => {
            if (
              new Date().getTime() - new Date(item.createTime).getTime() <=
              60000 * 3
            ) {
              item.timeStr = "刚刚";
            } else if (
              new Date().getTime() - new Date(item.createTime).getTime() <
              60000 * 60
            ) {
              const minutes = this.minutesBetweenDates(
                new Date(item.createTime),
                new Date()
              );
              item.timeStr = `${minutes}分钟前`;
            } else {
              item.timeStr = item.createTime;
            }
          });
          setTimeout(() => {
            uni.hideToast();
          }, 6000);
        });
    },
    // 获取最新数据
    getLatestList() {
      const startTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      this.startTime = startTime;
      const basicUserInfo = uni.getStorageSync("basicUnserInfo");
      api
        .post("/user/api/radar/aiPageData", {
          consumerIds: basicUserInfo.consumerIds,
          tenantId: this.tenantId,
          size: this.size,
          current: this.currentPage,
          startTime: startTime,
        })
        .then((res) => {
          res.data.records.map((item) => {
            if (
              new Date().getTime() - new Date(item.createTime).getTime() <=
              60000 * 3
            ) {
              item.timeStr = "刚刚";
            } else if (
              new Date().getTime() - new Date(item.createTime).getTime() <
              60000 * 60
            ) {
              const minutes = this.minutesBetweenDates(
                new Date(item.createTime),
                new Date()
              );
              item.timeStr = `${minutes}分钟前`;
            } else {
              item.timeStr = item.createTime;
            }
          });
          const newData = res.data.records.concat(this.aiDataList);
          const deduplicatedArr = this.deduplicateArrayById(newData);
          this.aiDataList = deduplicatedArr.splice(0, 100);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.view_all {
  position: fixed;
  width: 160rpx;
  height: 60rpx;
  background: #fe5a1c;
  border-radius: 80rpx 80rpx 80rpx 80rpx;
  opacity: 1;
  font-size: 24rpx;
  color: #ffffff;
  line-height: 60rpx;
  right: 32rpx;
  bottom: 10rpx;
  text-align: center;
  z-index: 9999;
}

.data_box {
  .ai_list_box {
    background: #ffffff;
    // height: 100vh;

    .scroll_view {
      height: 100%;
    }

    .user_name {
      display: inline-block;
      max-width: 140rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .new_name_box {
      @include flex_box(row, nowrap, space-between, center);
      .new_name {
        height: 50rpx;
        display: inline-block;
        // width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333333;
        font-weight: 500;
        font-size: 28rpx;
      }
      .new_date_box {
        height: 50rpx;
        width: 280rpx;
        text-align: right;
      }
    }

    .single_data {
      @include set_padding(12rpx, 12rpx);
      @include flex_box(row, nowrap, flex-start, flex-start);
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
      position: relative;

      .name_box {
        height: 50rpx;
      }

      .avatar_box {
        overflow: hidden;
      }

      .user_type_box {
        padding: 0 12rpx;
        // position: absolute;
        // right: 24rpx;
        // top: 24rpx;
        height: 50rpx;
        border: 1rpx solid #999999;
        // max-width: 100%;
        // width:auto;
        font-size: 24rpx;
        color: #333333;
        line-height: 50rpx;
        border-radius: 56rpx;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 20rpx;
        display: inline-block;
      }

      .user_avatar {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
      }

      .single_content {
        width: 100%;
        // width: calc(100% - 88rpx);

        .check_box {
          // @include flex_box(row, nowrap, flex-start, flex-start);

          .check_type {
            word-break: normal;
            white-space: nowrap;
          }
        }

        .goods_name {
          // text-overflow: ellipsis;
          // white-space: nowrap;
          // overflow: hidden;
        }
      }
    }
  }
}
</style>
